<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body custom-class="import-dialog"
             @close="close"
  >
    <el-form :model="form" label-width="100px" :rules="rules" ref="form">
      <el-descriptions title="租住信息">
        <el-descriptions-item label="房源">{{ data.premisesAddress }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="续租信息"></el-descriptions>

      <el-form-item label="租住周期" required>
        <el-row>
          <el-col :span="11">
            <el-form-item label="" prop="order.checkInTime">
              <el-date-picker style="width: 100%;" v-model="form.order.checkInTime" value-format="yyyy-MM-dd HH:mm:ss"
                              type="date"
                              placeholder="开始日期" :picker-options="checkInOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center;line-height: 36px;">-</el-col>
          <el-col :span="11">
            <el-form-item label="" prop="order.checkOutTime">
              <el-date-picker style="width: 100%;" v-model="form.order.checkOutTime" value-format="yyyy-MM-dd HH:mm:ss"
                              type="date"
                              placeholder="结算日期" :picker-options="checkOutOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="承租人/企业" prop="orderLessee.lesseeName">
        <el-input v-model="form.orderLessee.lesseeName" placeholder="请输入" :disabled="isDisabled"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="orderLessee.phone" disabled>
        <el-input v-model="form.orderLessee.phone" placeholder="请输入" maxlength="11" type="tel"
                  :disabled="isDisabled"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from '@/utils'
import { orderRelet } from '@/api/order/order'
import { compareDate, getDate } from '@/utils/common/moment'

export default {
  name: 'relet',
  props: {
    value: {
      default: false
    },
    title: {
      default: '续租'
    },
    data: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      // 弹窗状态
      visible: false,
      form: {
        orderLessee: {},
        order: {}
      },
      checkInOptions: {},
      checkOutOptions: {},
      // 表单验证规则
      rules: {
        orderLessee: {
          lesseeName: [
            { required: true, message: '请输入承租人/企业', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
          ]
        },
        order: {
          checkInTime: [
            { required: true, message: '请选择租住开始日期', trigger: 'blur' }
          ],
          checkOutTime: [
            { required: true, message: '请选择租住结束日期', trigger: 'blur' }
          ]
        }
      }
    }
  },
  computed: {
    isDisabled() {
      return true
    }
  },
  watch:
    {
      value: {
        handler(val) {
          if (val) {
            this.init()
          }
          this.visible = val
        }
        ,
        immediate: true
      }
      ,
      visible(val) {
        this.$emit('input', val)
      }
    }
  ,
  methods: {
    // 初始化表单数据
    init() {
      this.checkInOptions = {
        disabledDate: (time) => {
          return compareDate(time, this.data.checkInTime, '<=') || compareDate(time, this.form.order.checkOutTime, '>=')
        }
      }
      this.checkOutOptions = {
        disabledDate: (time) => {
          return compareDate(time,this.form.order.checkInTime,'<=')
        }
      }
      this.form = {
        orderId: this.data.orderId, //订单id
        premisesAddress: this.data.premisesAddress, //房源地址
        orderLessee: this.data.orderLessee, //续租人信息
        order: {
          houseId: this.data.houseId, //房源id
          reserveUser: this.data.reserveUser, //预定人
          reserveUserPhone: this.data.reserveUserPhone, //预定人手机号
          checkInTime: getDate(this.data.checkOutTime, 1, 'YYYY-MM-DD 00:00:00'), //this.data.checkOutTime, //入住时间
          checkOutTime: '', //退房时间
          orderSource: this.data.orderSource //订单来源：1订单管理 2嗨小克小程序(字典字段:order_source)
        }
      }
    },
    // 表单提交
    onSubmit: debounce(function() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          orderRelet(this.form).then(res => {
            this.$message.success(res.msg)
            this.$emit('success', res)
            this.close()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }, 300, true),
    close() {
      this.visible = false
      this.$emit('input', false)
    }
  }
}
</script>


<style scoped lang="scss">

</style>
